;(function(){

    /**
     * @function init          初始化
     * @function bindEvent     绑定事件
     * @function toNext        下一张图片
     * @function changeBtn     改变btn样式
     * @function move          移动动画效果
     * @function startMove     获取正在显示轮播图得下标
     * @function removeClass   移除对应的class属性
     * @function addClass      添加对应的class名
     */
    class Banner{
        constructor(){}

        /**
         * 
         * @param {按钮容器} btn
         * @param {按钮列表} btnList
         * @param {图片容器} swiperSlide 
         * @param {图片列表} swiperSlideList 
         * @param {当前宽度} swiperWidth 
         * @param {图片下标} index
         */
        init(btn, swiperSlide, swiperWidth, swiperContainer){
            this.timer = null;
            this.swiperWidth = swiperWidth;
            this.swiperSlide = swiperSlide;
            this.swiperSlideList = this.swiperSlide.children;
            this.swiperContainer = swiperContainer;
            this.index = 0;
            this.btn = btn;
            this.btnList = this.btn.children;
            this.startMove();
            this.bindEvent();
        }

        bindEvent(){
            for(let i = 0; i < this.btnList.length; i++){
                this.btnList[i].addEventListener("mouseenter", ()=>{
                    this.changeBtn(i);
                    this.move(this.swiperSlide, -swiperWidth * i, "left");
                })
            }
            this.swiperContainer.addEventListener("mouseenter", ()=>{
                clearInterval(this.timer);
            })

            this.swiperContainer.addEventListener("mouseleave", ()=>{
                this.startMove();
            })
        }

        toNext(){
            clearInterval(this.timer);
            if(this.index === this.swiperSlideList.length - 1){
                this.swiperSlide.style.left = 0;
                this.index = 1;
            }else{
                this.index ++;
            }
            this.move(this.swiperSlide, -swiperWidth * this.index, "left");
            this.startMove();
            this.changeBtn(this.index);
        }

        changeBtn(btnIndex){
            for (let i = 0; i < this.btnList.length; i++) {
                this.removeClass(this.btnList[i], "active");
            }
            if(btnIndex === 3){
                this.addClass(this.btnList[0], " active");
            }
            this.addClass(this.btnList[btnIndex], " active");
        }

        move(eleNode,target,attr){
            var g = getComputedStyle;
            clearInterval(eleNode.timer);
            eleNode.timer = setInterval(function(){
                var iNow = attr === "opacity" ? g(eleNode)[attr] * 100 : parseInt(g(eleNode)[attr]);
                var speed = (target - iNow) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                iNow += speed;
                eleNode.style[attr] = (attr === "opacity" ?  iNow / 100 : iNow + "px");
                iNow === target ? clearInterval(eleNode.timer) : "";
            },50)
        }

        startMove(){
            this.timer = setInterval(this.toNext.bind(this),3000);
        }
      
        //移除对应的class属性
        removeClass(dom , class_string){
            let classString = dom.className;
            let classArray = classString.split(" ");
            let tab_i =classArray.indexOf(class_string);
            if(tab_i !== -1) classArray.splice(tab_i,1);
            classString = classArray.join(""); 
            dom.className = classString;
        }

        //添加对应的class名
        addClass(dom, class_Name) {
            var classString = dom.className;
            var arr = classString.split(" ");
            var index = arr.indexOf(class_Name);
            if (index === -1) {
                arr.push(class_Name);
            }
            classString = arr.join(" ");
            dom.className = classString;
        }    
    }

    let banner = new Banner();
    let btn = document.querySelector(".btn");
    let swiperSlide = document.querySelector(".swiper-slide");
    let swiperContainer = document.querySelector(".swiper-container");
    let swiperWidth = swiperContainer.offsetWidth;
    banner.init(btn, swiperSlide, swiperWidth, swiperContainer);
})()